<template>
    <view class="search-history">
        <!-- 标题栏 -->
        <view class="header">
            <text class="title">搜索历史</text>
            <text class="clear" @tap="clearHistory">
                <text class="iconfont icon-delete"></text>
                清空历史
            </text>
        </view>

        <!-- 历史记录包装器 -->
        <view class="history-wrapper" :class="{ 'expanded': isExpanded }">
            <!-- 历史记录列表 -->
            <view class="history-list">
                <view v-for="(item, index) in historyList" :key="index" class="history-item"
                    @tap="handleItemClick(item)">
                    <text class="iconfont icon-time"></text>
                    <text class="history-text">{{ item }}</text>
                </view>
            </view>
        </view>

        <!-- 展开/收起按钮 -->
        <view v-if="showExpandButton" class="expand-button" @tap="toggleExpand">
            <text class="expand-text">{{ isExpanded ? '收起' : '查看更多' }}</text>
            <text class="iconfont" :class="isExpanded ? 'icon-up' : 'icon-down'"></text>
        </view>
    </view>
</template>

<script setup>
// 1. 确保正确导入
import { ref, computed } from 'vue'

// Props 定义
const props = defineProps({
    // 历史记录列表
    history: {
        type: Array,
        default: () => []
    }
})

// Emits 定义
const emit = defineEmits(['select', 'clear'])

// 响应式状态
const isExpanded = ref(false)

// 使用 computed 处理历史记录列表
const historyList = computed(() => props.history)

// 计算是否显示展开按钮 (优化计算逻辑)
const showExpandButton = computed(() => {
    return historyList.value && historyList.value.length > 6
})

// 事件处理函数
const handleItemClick = (item) => {
    emit('select', item)
}

const clearHistory = () => {
    emit('clear')
}

const toggleExpand = () => {
    isExpanded.value = !isExpanded.value
}
</script>

<style lang="scss" scoped>
.search-history {
    padding: 30rpx;
    background: #ffffff;
    border-radius: 24rpx;

    // 标题栏样式
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;

        .title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333333;
        }

        .clear {
            font-size: 26rpx;
            color: #999999;
            padding: 10rpx 20rpx;
            display: flex;
            align-items: center;
            gap: 6rpx;

            &:active {
                opacity: 0.7;
            }

            .iconfont {
                font-size: 28rpx;
            }
        }
    }

    // 历史记录包装器
    .history-wrapper {
        position: relative;
        max-height: 140rpx;
        overflow: hidden;
        transition: max-height 0.3s ease-out;

        &.expanded {
            max-height: 999rpx;
        }
    }

    // 历史记录列表
    .history-list {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;

        .history-item {
            background: #f5f5f5;
            padding: 15rpx 30rpx;
            border-radius: 30rpx;
            transition: all 0.2s ease;

            &:active {
                background: #e8e8e8;
            }

            .history-text {
                font-size: 28rpx;
                color: #666666;
            }
        }
    }

    // 展开按钮
    .expand-button {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20rpx;
        padding: 10rpx;

        .expand-text {
            font-size: 28rpx;
            color: #999999;
            margin-right: 10rpx;
        }

        .iconfont {
            font-size: 24rpx;
            color: #999999;
            transform: rotate(90deg);
            transition: transform 0.3s ease;

            &.expanded {
                transform: rotate(-90deg);
            }
        }
    }
}
</style>